<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <h3 id="data">数据未加载...</h3>
    <button id="btn">发起AJAX请求</button>

    <script>
      btn.onclick = function (e) {
        xhrGet();
      };

      function xhrGet() {
        // 创建一个XHR对象
        const xhr = new XMLHttpRequest();

        // 配置请求方式和请求路径
        xhr.open(
          "GET",
          "https://www.httpbin.org/getter?username=heige&pwd=123456"
        );

        // 监听【就绪状态变更事件】
        // xhr.onreadystatechange = function (e) {
        //   console.log("onreadystatechange");

        //   // 查看就绪状态（xhr.readyState）和服务端响应状态码（xhr.status）
        //   let rs = xhr.readyState;
        //   let status = xhr.status;//响应状态码
          
        //   console.log("xhr.readyState", xhr.readyState);
        //   console.log("xhr.status", xhr.status);
        //   console.log("xhr.responseText", xhr.responseText);
        //   console.log("");

        //   if (rs === 4 && status === 404) {
        //     console.log("未发现资源");
        //     setTimeout(() => {
        //       document.write("未发现资源");
        //     }, 1000);
        //   }

        //   // 如果它们同时就绪且OK
        //   if (rs === 4 && (status >= 200) & (status <= 299)) {
        //     // 就获取返回数据（xhr.responseText）
        //     console.log(xhr.responseText);
        //     data.innerText = xhr.responseText;
        //   }
        // };

        // 发送请求（非GET请求可以携带请求体）
        xhr.send(null);

        // /* readyState走到4且status为2XX时触发xhr的load事件 */
        xhr.onload = function () {
            console.log(xhr.responseText);
            data.innerText = xhr.responseText
        }

        // 请求错误事件的处理
        xhr.onerror = function(err){
            console.error("err=",err)
            document.write(JSON.stringify(err))
        }

        console.log("请求发送完毕！");
      }
    </script>
  </body>
</html>
